<html>

<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <script src="/js/plugins/dialog/dialog.css"></script>
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>

    <!--<script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/dialog/dialog.css"></script>-->

    <script>
        var currentPage = 1; //当前页
        var pages; //总页数
        var travels; //当前页面的游记对象

        $(function () {



            //获取当前登录的用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            //全局对象信息
            var followUser;
            //当次用户进入此页面时 获取此对象的id
            var params = getParams();

            if (!params.id) {
                //如果此用户没有登录,请他返回登录页面登录
                return;
            }
            //作为检查没如果此用户已登录 可查看此信息
            //发送请求去通过此用户id查询相关信息 并渲染到页面
            $.get("/users/" + params.id + "/userId", function (data) {
                followUser = data;
                $(".bg").renderValues(data);
                $(".bg").css("background-image", 'url("' + data.coverImgUrl + '")');
            });


            //通过用户id获取他的所有评论的内容(进行回显)
            $.get("/strategies/users/"+params.id+"/comments/", function (data) {
                //渲染数据
                $(".comments").renderValues({list: data},{
                    handler:function (ele,value) {
                        ele.href="/strategyCatalogs.html?strategyId="+value;
                    },
                    userinfo:function (ele,value) {
                        ele.href="/mine/userProfiles.html?id="+params.id;
                    }
                });
                $.each(data, function (index, value) {
                    //显示图片
                    var imgUrls = value.imgUrls.substring(0, value.imgUrls.length - 1);
                    var imgs = imgUrls.split(";");//得到n+1个url
                    var imgshmtl = "";
                    $.each(imgs, function (index, img) {
                        imgshmtl += '<li><img src=' + img + '></li>';
                    })
                    $(".comment-img[data-starid ='" + value.id + "']").html(imgshmtl);

                    //显示星星评价
                    var stars = value.starNum;
                    var starhtml = "";
                    for (var i = 0; i < stars; i++) {
                        starhtml += '<i class="fa fa-star"></i>';
                    }
                    for (var i = stars; i < 5; i++) {
                        starhtml += '<i class="fa fa-star-o"></i>';
                    }
                    $(".comment-star[data-starid ='" + value.id + "']").html(starhtml);

                });


                //私信按钮点击事件
                $(".privateLetterBtn").click(function () {
                    location.href = "/writePrivateLetter.html?id="+params.id;
                });
            })



            //关注按钮
            //当点击此按钮时绑定一个change事件 如果这个按钮的值改变
            //就去数据库查询本人是否关注此用户 如果已经关注就设置
            //就修此页面的关注和取消关注
            setTimeout(function () {

                $.get("/users/focus", {currentId: user.id, targetId: params.id}, function (data) {

                    //如果当前用户和目标用户有关注,文本设置为取消关注,点击取消关注时,删除关注关系
                    //如果当前用户和目标用户没有关注,文本设置为关注,点击关注时,添加保存关注关系
                    var fansNum = followUser.fansNum;

                    //查询当前用户和目标用户是否有关注
                    //如果有关系,文本设置为取消关注,如果没有关系,文本设置为关注
                    if (data.num) {
                        $("#followBtn").text("取消关注");
                    } else {
                        $("#followBtn").text("关注")
                    }

                    $("#followBtn").click(function () {
                        if ($("#followBtn").text() == "关注") {
                            //点击关注时,添加保存关注关系,然后状态变更为取消关注
                            $.get("/users/insert", {currentId: user.id, targetId: params.id}, function (data) {
                                $("#followBtn").text("取消关注");
                                fansNum = fansNum + 1;
                                $("#fans").text(fansNum);
                            })
                        } else {
                            //点击取消关注时,取消关注关系,然后状态变更为关注
                            $.get("/users/delete", {currentId: user.id, targetId: params.id}, function (data) {
                                $("#followBtn").text("关注");
                                fansNum = fansNum - 1;
                                $("#fans").text(fansNum);
                            });
                        }
                    });
                });
            }, 50);

            //通过目标id获取所有游记
            $.get("/users/" + params.id + "/travels", {pageSize: 3}, function (data) {
                //把返回的数据渲染到界面
                renderView(data);
                //返回的data是pageInfo对象,内部包含了分页需要用到的数据
                pages = data.pages;
                travels = data.list;
            }, "json");

            //当屏幕滚当最底部的时候执行
            $(window).scroll(function () {
                if (isEnd()) {
                    //判断是否有下一页
                    if (currentPage < pages) {
                        currentPage++;
                        //当前页+1,并发送请求获取下一页
                        $.get("/users/" + params.id + "/travels", {currentPage: currentPage, pageSize: 3}, function (data) {
                            $.merge(travels, data.list);
                            renderView({list: travels});
                        }, "json");
                    }
                }
            });
        });

        //渲染界面
        function renderView(data) {
            $("#travels").renderValues(data, {
                //属性名就是函数的名称
                handle: function (ele, value) {
                    //动态渲染a标签
                    $(ele).attr("href", "/travelContent.html?id=" + value);
                }
            });
        }
    </script>

</head>
<body>
<div class="container bg" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span render-html="followNum"></span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span render-html="fansNum" id="fans"></span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn privateLetterBtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span render-html="followNum"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">

            <dl class="list" render-loop="list">
                <dd>
                    <a render-key="list.id" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">


            <div class="comments">
                <div render-loop="list">
                    <div class="row">


                        <div class="col-2 comment-head">
                            <a render-key="strategy.id" render-fun="userinfo">
                                <img class="rounded-circle" render-src="list.user.headImgUrl">
                            </a>
                        </div>


                        <div class="col">
                            <span class="comment-star" render-attr="data-starid=list.id"> </span>
                            <span class="comment-date" render-html="list.commentTime"></span>
                            <div class="comment-content">
                                <a href="strategyComment.html">
                                    <p class="content"><span render-html="list.comment"></span></p>
                                </a>
                            </div>

                            <ul class="comment-img" render-attr="data-starid=list.id">
                            </ul>
                            <div class="comment-link">
                                <a href="strategyCatalogs.html" render-key="list.strategy.id" render-fun="handler">
                                    <img render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
                                    <i class="fa fa-angle-right fa-2x"></i>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        </div>
        <div class="tab-pane fade" id="pills-contact">.3333..</div>
    </div>
</div>
</body>
</html>